<template>
  <!-- 每一个页面文件夹下的Index.vue就是这个页面组件 -->
  <!-- <MyHeader title="猫眼电影">
    <span class="iconfont icon-caidan"></span>
  </MyHeader> -->

  <!-- <div class="top">
    <MyHeader title="猫眼电影" :hasIcon="true"></MyHeader>
    <MyNav />
  </div>
  <div class="main">
    <div class="wrapper">
      <Rated />
      <Movies @addBs="addBs" :moreList="moreList" />
    </div>
  </div> -->

  <RouterView />

  <MyFooter />
</template>

<script>
// https://better-scroll.github.io/docs/zh-CN/guide/how-to-install.html#script-%E5%8A%A0%E8%BD%BD
// import MyHeader from "./components/MyHeader.vue";
// import MyNav from "./components/MyNav.vue";
import MyFooter from "./components/MyFooter.vue";
// import Rated from "./components/Rated.vue";
// import Movies from "./components/Movies.vue";

// import BScroll from "better-scroll";

export default {
  // data() {
  //   return {
  //     moreList: [],
  //     ids: [], // 用于存储所有的id
  //     startIndex: 0,
  //     length: 10,
  //   };
  // },
  components: {
    // MyHeader,
    // MyNav,
    MyFooter,
    // Rated,
    // Movies,
  },
  // methods: {
  //   addBs(ids, length) {
  //     this.ids = ids;
  //     this.startIndex = length;

  //     const bs = new BScroll(".main", {
  //       startY: 0,
  //       scrollX: false,
  //       scrollY: true,
  //       click: true,
  //       pullUpLoad: true, // 允许页面进行上拉加载
  //     });

  //     bs.on("pullingUp", () => {
  //       console.log("拉到低了");
  //       // bs.finishPullUp()

  //       // 这里已经是拉到底了，再一次去请求接口

  //       // http://101.35.148.193:3000/api/movies/more
  //       // post
  //       // ids: 电影的id，如果有多个，那么用逗号隔开

  //       fetch("http://101.35.148.193:3000/api/movies/more", {
  //         method: "POST",
  //         headers: { "content-type": "application/json" },
  //         body: JSON.stringify({
  //           // ids: "1250604,1499719",
  //           // ids: this.ids.join(","),
  //           ids: this.ids
  //             .slice(this.startIndex, this.startIndex + this.length)
  //             .join(","),
  //         }),
  //       })
  //         .then((response) => response.json())
  //         .then((res) => {
  //           // console.log(res);
  //           if (res.success) {
  //             // 要将加载更多得到的数据拼接到原来的数组中，而不是替换
  //             this.moreList = [...this.moreList, ...res.data];
  //             // console.log(this.moreList);
  //             this.startIndex += res.data.length;
  //             // console.log(this.startIndex);

  //             setTimeout(() => {
  //               bs.refresh(); // 重新生成一次滚动的效果
  //               bs.finishPullUp(); // 用来告诉bs，这一次的请求好了，可以准备下一次的下拉到底的事件了
  //             }, 0);
  //           }
  //         });
  //     });
  //   },
  // },
};
</script>

<style scoped lang="less">
.top {
  position: fixed;
  width: 375px;
  height: 98px;
  left: 0;
  top: 0;
  z-index: 999;
}

.main {
  // margin-top: 98px;
  // margin-bottom: 49px;
  position: fixed;
  top: 98px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
